<script setup lang="ts">
import { ref } from 'vue'
import KnowledgeCard from './KnowledgeCard.vue'
import { getKnowledgeList } from '@/services'
import type { KnowledgeList, KnowledgeParams, knowledgeType } from '@/types/consult'

const props = defineProps<{
  type: knowledgeType
}>()

const list = ref<KnowledgeList>([])
const loading = ref(false)
const finished = ref(false)

const params = ref<KnowledgeParams>({
  type: props.type,
  current: 14,
  pageSize: 10
})

const onLoad = async () => {
  const res = await getKnowledgeList(params.value)
  // 所有数据
  list.value.push(...res.data.rows)
  // 关闭加载
  loading.value = false
  // 页数++
  params.value.current++
  // 判断触底(加载)
  // 没有了显示 (没有更多)
  // 页数判断
  if (params.value.current > res.data.pageTotal) {
    finished.value = true
  }
  // 条数判断
  // if (list.value.length > res.data.total) {
  //   finished.value = true
  // }
}
</script>

<template>
  <!-- 
    @load="onLoad" 刚上来就触发一次, 加载到底部触发一次
   -->
  <div class="knowledge-list">
    <van-list
      v-model:loading="loading"
      :finished="finished"
      finished-text="--- 我也是有底线的 ---"
      @load="onLoad"
    >
      <knowledge-card v-for="item in list" :key="item.id" :item="item"></knowledge-card>
      <template #loading>
        <div class="loading">
          <cp-icon name="consult-run"></cp-icon>
          <span>拼命加载中...</span>
        </div>
      </template>
    </van-list>
  </div>
</template>

<style lang="scss" scoped>
.knowledge-list {
  padding: 0 15px;
}
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  svg {
    width: 20px !important;
    height: 20px !important;
  }
}
</style>
